<template>
  <div class="device-info-home" v-if="visible">
    <TwinPlayer type="get" :camera="params" ref="twinPlayeRef" />

    <div class="box-btn">
      <div>
        <a-button type="primary" @click="getAngle">
          获取巡视点位视场角
        </a-button>
      </div>
      <div class="flex justify-between mt-3">
        <a-button class="cancel" @click="close">返回</a-button>
        <a-button type="primary" @click="submit">确定</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import TwinPlayer from '@/components/TwinPlayer/index.vue'

const visible = ref(false)
const twinPlayeRef = ref()
const point = ref()
const params = ref({})

const emit = defineEmits(['confirm', 'cancel'])

defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

async function getAngle() {
  try {
    const angle = await twinPlayeRef.value.getAngle()
    point.value = angle
    message.success('巡视点位【' + angle.join(' , ') + '】视场角获取成功')
  } catch (error) {
    message.warning(error)
  }
}

const close = () => {
  visible.value = false
  emit('cancel')
}

// TODO 确定之前，须先获取视场角
const submit = () => {
  if (!point.value) {
    message.warning('请点击【获取巡视点位视场角】按钮')
  } else {
    visible.value = false
    emit('confirm', point.value)
  }
}

const showModal = (data: any) => {
  params.value = data
  point.value = null
  visible.value = true
}

defineExpose({ showModal, close, point })
</script>

<style lang="less" scoped>
.device-info-home {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  border-radius: 0.5rem;

  .box-btn {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
  }
}
</style>
